import styled from 'styled-components';

export const HeadStyle = styled.div`
    
    display:flex;
    font-size:.12rem;
    flex-direction:column;

    a{
        text-decoration:none;
        color:#1c1717;
    }

    .top,.top-nav{
        dlsplay:flex;
        padding:0 .1rem;
        position: relative;
        height:.4rem;
    }

    .go-back{
        position: absolute;
        top: 0;
        display:flex;
        height: 100%;
        line-height: .4rem;
        width: .4rem;
        justify-content:center;
        align-items:Center;
    }

    h2{
        text-align: center;
        height: .4rem;
        line-height: .4rem;
        font-size:.18rem;
        font-weight: 700;
    }

    .coupon-active{
        position: absolute;
        top: 0;
        height: 100%;
        line-height: .4rem;
        right: .4rem;
        font-size: .15rem;
    }

    .top-nav{
        position: relative;
    }

    .top-nav ul{
        display:flex;
        justify-content:space-between;
    }
    .top-nav li{
        width:33.33%;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: .18rem 0 .18rem;
        text-align: center;
        font-size: .15rem;
        font-weight: 700;
    }

    .line{
        width: 33.333%;
        height: .025rem;
        transition: all .2s ease;
        position: absolute;
        bottom:-.025rem;
    }

    .inner{
        width: 35%;
        height: 100%;
        background-color: #f8a120;
        margin: 0 auto;
    }

    .content{
        position: absolute;
        top: .9rem;
        bottom: 0;
        background-color: #f5f5f5;
        overflow: hidden;
        width: 100%;
        padding: .15rem .1rem 0;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: .15rem;
        color: #999;
        text-align: center;
    }

    .empty{
        width: 1.22667rem;
        height: .8rem;
        margin: .4rem auto .1rem;
        background:url("./img/empty.png") no-repeat 25%/cover;
        background-size:100% 100%;
    }

    .clearfix::after{
        display:block;
        content:"";
        height:0;
        visibility:hidden;
        overflow:hidden;
        clear:both;
    }
`;